<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="980px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <!-- <el-form ref="form" :model="form" :rules="rules" :disabled="disabled">
        <el-form-item label="" prop="">
          <el-input v-model="form.keyword" clearable placeholder="请输入用户姓名、手机号、哈希码" :style="{width: inputWidth}" />
          <el-button type="primary" size="small" style="margin-left: 20px" @click="getList">查 询
          </el-button>
        </el-form-item>
      </el-form> -->
      <div class="tabel_box">
        <div class="tabel_box_h">
          <el-form ref="form" :model="form" :rules="rules" :disabled="disabled">
            <el-form-item label="" prop="">
              <el-input v-model="form.keyword" clearable placeholder="请输入用户姓名、手机号、哈希码" :style="{width: inputWidth}" />
              <el-button type="primary" size="small" style="margin-left: 20px" @click="handleQuery">查 询
              </el-button>
            </el-form-item>
          </el-form>
          <export-excel-button size='small' title="券码明细" action="/equity/inventory/coupon/code/export"
            :params="ExportParams" />
        </div>
        <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="哈希码" align="center" prop="code" :show-overflow-tooltip="true" />
          <!-- <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true" /> -->
          <el-table-column label="状态" align="center" prop="" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="statusOptions" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="激活时间" align="center" prop="activeTime" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column label="核销时间" align="center" prop="verificationTime" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="核销店铺" align="center" prop="verificationShopName" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="有效期" align="center" prop="validityTime" :show-overflow-tooltip="true" width="120px">
          </el-table-column>
          <el-table-column label="激活来源" align="center" prop="" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="options" :value="scope.row.activeSource" />
            </template>
          </el-table-column>

          <el-table-column label="激活用户" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" width="120px" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import {
    inventoryCouponCodeList,
    adminDict,
  } from "@/api/equityManager/equityInventory";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    // dicts: ['asset_card_type'],
    name: "dialogwhiteList",
    components: {
      ExportExcelButton,
    },
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '260px',
        // 是否禁用表单
        disabled: false,
        options: [], //激活来源
        statusOptions:[],//状态
        // 弹出层标题
        title: "券码明细",
        // 是否显示弹出层
        visible: false,
        // 总条数
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        //数组
        tabelList: [],
        // 表单参数
        form: {
          inventoryId: '', //权益库存id
          keyword: '', //姓名/手机号/哈希码
        },
        // 表单校验
        rules: {

        },
      };
    },
    created() {
      
    },
    computed: {
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.form,
          ...this.queryParams
        };
        return params;
      },
    },
    methods: {
      getadminDict() {
        //获取激活来源字典
        const params = {
          dictType: "equity_inventory_active_source,equity_inventory_coupon_code_status",
        };
        adminDict(params).then((res) => {
          this.options = res.result[0].dictList;
          this.statusOptions = res.result[1].dictList;
        });
      },
      //获取列表
      getList(id) {
        this.loading = true
        let data = {
          ...this.form,
          ...this.queryParams
        }
        inventoryCouponCodeList(data).then(response => {
          this.tabelList = response.result.records
          this.total = response.result.total;
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      /** 打开弹窗 */
      open(item) {
        this.getadminDict()
        this.reset();
        this.title = '券码明细' + '（' + item.name + '）'
        this.form.inventoryId = item.id
        this.getList()
        this.visible = true
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList()
      },
      // 表单重置
      reset() {
        this.form.keyword = ''
      },
    }
  };

</script>
<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  .tabel_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .icon_yes {
    font-size: 30px;
    color: #67c23a;
  }

  .icon_no {
    font-size: 30px;
    color: #f56c6c;
  }

</style>
